<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="div">
    <el-row>
        <el-col :span="7">
            <div class="grid-content bg-purple">
                <span style="color: #FFFFFF">我爱你</span>
            </div>
        </el-col>
        <el-col :span="9">
            <div class="grid-content bg-purple-dark">
                <el-container>
                    <el-header style="text-align: center; font-size: 12px">
                        <div style="margin-left: 50px;font-size: 20px">疫情防控打卡页面</div>
                    </el-header>
                    <el-form :label-position="'left'" label-width="200px" :model="formLabelAlign">
                        <el-form-item label="学号/工号">
                            <el-input v-model="formLabelAlign.number" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="位置">
                            <el-input v-model="address.province" style="width: 300px" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="角色">
                            <el-select v-model="formLabelAlign.role" placeholder="请选择角色" style="width: 300px">
                                <el-option
                                        v-for="ro in role"
                                        :label="ro.label"
                                        :value="ro.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input v-model="formLabelAlign.phone" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号码">
                            <el-input v-model="formLabelAlign.identification" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="是否健康">
<!--                            <el-switch v-model="formLabelAlign.symptom"></el-switch>-->
                            <el-radio v-model="formLabelAlign.symptom" label="true">是</el-radio>
                            <el-radio v-model="formLabelAlign.symptom" label="false">否</el-radio>
                        </el-form-item>
                        <el-form-item label="是否为密接">
<!--                            <el-switch v-model="formLabelAlign.closer"></el-switch>-->
                            <el-radio v-model="formLabelAlign.closer" label="true">是</el-radio>
                            <el-radio v-model="formLabelAlign.closer" label="false">否</el-radio>
                        </el-form-item>
                        <el-form-item label="是否为去过高风险地区">
<!--                            <el-switch v-model="formLabelAlign.risk"></el-switch>-->
                            <el-radio v-model="formLabelAlign.risk" label="true">是</el-radio>
                            <el-radio v-model="formLabelAlign.risk" label="false">否</el-radio>
                        </el-form-item>

                        <el-form-item label="是否被隔离">
<!--                            <el-switch v-model="formLabelAlign.isolate"></el-switch>-->
                            <el-radio v-model="formLabelAlign.isolate" label="true">是</el-radio>
                            <el-radio v-model="formLabelAlign.isolate" label="false">否</el-radio>
                        </el-form-item>
                        <el-form-item align="center">
                            <el-button type="primary" @click="addCheckin()" style="text-align: center;">打卡</el-button>
                        </el-form-item>
                    </el-form>
                </el-container>
            </div>
        </el-col>
        <el-col :span="7">
            <div class="grid-content bg-purple">
                <span style="color: #FFFFFF">我爱你</span>
            </div>
        </el-col>
    </el-row>

</div>


<script>
    new Vue({
        el: "#div",
        data: {
            formLabelAlign: {},
            role: [{
                value: '学生',
                label: '学生'
            }, {
                value: '教职工',
                label: '教职工'
            }],
            address: [],
        },
        methods: {
            addCheckin() {
                let param = "action=addCheckin&number=" + this.formLabelAlign.number +
                    "&role=" + this.formLabelAlign.role + "&phone=" + this.formLabelAlign.phone +
                    "&identification=" + this.formLabelAlign.identification +
                    "&symptom=" + this.formLabelAlign.symptom + "&closer=" + this.formLabelAlign.closer +
                    "&risk=" + this.formLabelAlign.risk + "&isolate=" + this.formLabelAlign.isolate +
                    "&address=" + this.address.city;
                console.log(param);
                console.log(this.formLabelAlign);

                axios.post("/EpidemicControlSystem_war_exploded/CheckinServlet", param)
                    .then(res => {
                        if (res.data == true) {
                            alert('打卡成功')
                        }
                    })
            },
            getAddress() {
                axios.get("https://restapi.amap.com/v3/ip?output=json&key=0ea3a2a451c56b64527225c33a40f8e9")
                    .then(response => {
                        console.log(response.data);
                        this.address = response.data;
                        console.log(this.address);
                    })
            },
            getUser() {
                axios.post("/EpidemicControlSystem_war_exploded/UserServlet", "action=user")
                    .then(res => {
                        this.user = res.data.loginUser;
                        this.userInfo = res.data.loginUserInfo;
                        this.formLabelAlign.number = this.userInfo.userNumber;
                        this.formLabelAlign.name = this.userInfo.name;
                        this.formLabelAlign.phone = this.userInfo.phone;
                        this.formLabelAlign.identification = this.userInfo.identification;
                    });
            }
        },
        created() {
            this.getAddress();
            this.getUser();
        }

    });
</script>
</body>
</html>